<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="head-box flex-row-center" :style="{paddingTop: +statusBarHeight+'px'}">
		<image src="@/static/login/login_bg.png" class="head-bg" mode="widthFix"></image>
		<view class="head-item" @click="back">
			<up-icon name="arrow-left" color="#CDDBDC" size="42rpx"></up-icon>
		</view>
		<view class="head-title flex-center">
			<text class="title">登录</text>
		</view>
		<view class="head-item"></view>
	</view>
	<view class="login-from-box">
		<!-- 登录表单 -->
		<text class="title">登录后更精彩</text>
		<!-- 密码登录 -->
		<!-- id="tabbar" :animation="animationData" v-if="compontentState==='password'" v-if="compontentState==='verification'" -->
		<view class="login-from-content">
			<swiper @change="swiperChange" class="swiper" :style="{height:swiperHeight+'px'}" circular
				:current="current">
				<swiper-item style="width: 100%;height: 100%;">
					<passwordLoginVue class="passwordLogin" @toRegister="toRegister" :checked="checked"
						@changeState="changeState">
					</passwordLoginVue>
				</swiper-item>
				<swiper-item style="width: 100%;height: 100%;">
					<verificationLoginVue :checked="checked" @changeState="changeState" @toRegister="toRegister">
					</verificationLoginVue>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<!-- 协议 -->
	<view class="agreement-box flex-center">
		<up-checkbox labelColor="#999999" shape="circle" size="30rpx" labelSize="24rpx" label="已阅读并同意" activeColor="#8BDEB7"
			@change="changeChecked" name="agree" :checked="checked">
		</up-checkbox>
		<view class="content flex-row-center">
			<text class="agreement-name" @click="toProtocol(1)">《平台协议》</text>
			<text class="text">与</text>
			<text class="agreement-name" @click="toProtocol(2)">《隐私协议》</text>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import passwordLoginVue from '../../components/login/passwordLogin.vue';
	import verificationLoginVue from '../../components/login/verificationLogin.vue';
	import {
		getCurrentInstance
	} from 'vue';
	const statusBarHeight = ref(0);
	const compontentState = ref('password');
	const current = ref(0);
	const swiperHeight = ref(396);
	const animationData = ref('');
	const passwordLogin = ref(null)
	const checked = ref(false);
	const loginFrom = ref(null);
	const inviteInfo = reactive({
		code: '',
		type: 0
	})
	onLoad(async (option) => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
		console.log('optionlogin', option);
		if (option.i && option.t) { //推广码
			inviteInfo.code = option.i;
			inviteInfo.type = option.t;
		}
	})
	const toRegister = () => {
		uni.navigateTo({
			// url: '/pages/login/register?i=' + inviteInfo.code + '&t=' + inviteInfo.type
			url: '/pages/login/register'
		})
	};
	const swiperChange = (e) => {
		let info = uni.createSelectorQuery().select(".passwordLogin");
		info.boundingClientRect(function(data) { //data - 各种参数
			console.log(data) // 获取元素宽度
			// swiperHeight.value = Math.ceil(data.height)+36;
		}).exec()
		current.value = e.detail.current;
	}
	const startAnimation = () => {
		const animation = uni.createAnimation({
			duration: 300,
		});
		animation.rotateY(180).step();
		animation.rotateY(0).step();
		// 导出动画数据
		animationData.value = animation.export();
		setTimeout(() => { // 动画完成后执行的操作，例如重置动画
			animation.rotate(0).step();
			animationData.value = animation.export();
		}, 800);
	};
	const startAnimationTwo = () => {
		const animation = uni.createAnimation({
			duration: 300,
		});
		animation.rotateY(-180).step();
		animation.rotateY(0).step();
		// 导出动画数据
		animationData.value = animation.export();
		setTimeout(() => { // 动画完成后执行的操作，例如重置动画
			animation.rotate(0).step();
			animationData.value = animation.export();
		}, 800);
	};

	const changeState = (type) => { //切换组件.$el.offsetHeight
		// console.log('passwordLogin', passwordLogin.value.$u);

		if (type === 'password') {
			// startAnimation()
			current.value = 0;
		} else {
			// startAnimationTwo()
			current.value = 1;
		}
		// compontentState.value = type;
	}
	const back = () => {
		// 获取所有页面栈实例列表
		let pages = getCurrentPages() || [];
		if (pages.length > 1) {
			uni.navigateBack()
		} else {
			uni.reLaunch({
				url: '/pages/init/init'
			})
		}
	}
	const viewAgreement = (type) => {
		uni.navigateTo({
			url: '/pages/webview/webview'
		})
	}
	const changeChecked = (e) => {
		checked.value = e;
	}
	const toProtocol = (type) => { //阅读协议
		uni.navigateTo({
			url: '/pages/protocol/protocol?type=' + type
		})
	}
</script>
<style lang="scss" scoped>
	.head-box {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 0 28rpx;
		justify-content: space-between;

		.head-bg {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
		}

	}

	.head-title {
		height: 76rpx;
		box-sizing: border-box;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: rgba(255, 255, 255, 0.87);
		}
	}

	.head-item {
		width: 120rpx;
	}

	.login-from-box {
		width: 100%;
		box-sizing: border-box;
		padding: 54rpx;
		margin-top: 128rpx;

		.title {
			font-weight: bold;
			font-size: 50rpx;
			color: rgba(255, 255, 255, 0.87);
		}

		.login-from-content {
			.swiper {
				width: 100%;
			}
		}

		@keyframes identifier {
			0% {
				transform: rotateY(180deg);
			}

			100% {
				transform: rotateY(0deg);
			}
		}
	}

	.agreement-box {
		width: 100%;
		position: absolute;
		bottom: 112rpx;
		left: 0;
		justify-content: center;

		.content {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 8rpx;

			.text {
				color: #999999;
			}

			.agreement-name {
				color: #559992;
			}
		}
	}
</style>